<template>
  <div class="min-h-full p-10px box-border bg-gray-200 flex flex-col">
    <div class="flex-none text-base p-10px box-border rounded bg-light-50">
      <div class="border-b border-gray-200 pb-10px box-border">项目需求基本信息</div>
      <div class="w-2/5 mt-20px">
        <prefix-input prefix="需求名称" v-model:value="demandName" placeholder="请输入需求名称"/>
      </div>
      <div class="w-2/5 mt-20px">
        <prefix-input prefix="需求简介" v-model:value="demandDesc" placeholder="请输入需求简介(可选)"/>
      </div>
    </div>
    <div class="mt-10px p-10px box-border bg-light-50 rounded flex flex-col">
      <div class="flex-none text-base border-b border-gray-200 pb-10px box-border">项目需求项</div>
      <div class="flex flex-col flex-1">
        <demand-creator-editor @create="onCreate"/>
        <div class="flex-1 mt-10px">
          <demand-creator-table v-model:task-list="taskList"/>
        </div>
      </div>
      <div class="flex-none border-t border-gray-200 flex justify-end">
        <div class="p-5px box-border rounded bg-blue-600 text-light-50 mt-10px cursor-pointer">提交需求</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {TaskItem} from "@/pages/project/type";
import {useRoute} from "vue-router";
import {useGet} from "@/hooks";
import PrefixInput from "@/components/customInput/PrefixInput.vue";
import DemandCreatorTable from "@/pages/project/components/DemandCreatorTable.vue";
import DemandCreatorEditor from "@/pages/project/components/DemandCreatorEditor.vue";

const route = useRoute()
const demandName = ref("")
const demandDesc = ref("")
const projectId = route.query.projectId
console.log(projectId)
const taskList = ref<TaskItem[]>([
  {
    taskName: "111",
    taskPriority: "middle",
    taskStatus: "规划中",
    taskOwner: "hwj",
    taskStart: 1674974280000,
    taskEnd: 1675233480000
  }, {
    taskName: "111",
    taskPriority: "high",
    taskStatus: "进行中",
    taskOwner: "",
    taskStart: 1674974280000,
    taskEnd: 1675233480000
  }, {
    taskName: "111",
    taskPriority: "normal",
    taskStatus: "已完成",
    taskOwner: "hwj",
    taskStart: 1674974280000,
    taskEnd: 1675233480000
  }, {
    taskName: "111",
    taskPriority: "normal",
    taskStatus: "进行中",
    taskOwner: "hwj",
    taskStart: 1674974280000,
    taskEnd: 1675233480000
  }, {
    taskName: "111",
    taskPriority: "normal",
    taskStatus: "进行中",
    taskOwner: "hwj",
    taskStart: 1674974280000,
    taskEnd: 1675233480000
  }
])

onMounted(() => {
  useGet({
    url: `/v1/group/member/list/${projectId}`,
    params: {},
    success: (data) => {
      console.log(data)
    },
    fail: (message) => {
      console.log(message)
    }
  }, true)
})

function onCreate(task: TaskItem) {
  taskList.value.push(task)
}
</script>

<style scoped>

</style>